<template>
  <div class="fixed-header fixed-footer">
    <x-header in-app-close>最近开奖</x-header>
    <div class="bg-white text-center py-3">
      <div class="text-grey">第{{is.lotteryNo}}期 {{is.endTime}}</div>
      <div class="mt-3" v-html="results"></div>

      <div class="d-flex mt-4">
        <div class="w-50">
          <div class="text-grey font-lg mb-2">本期销量</div>
          <div class="font-xxl text-red" v-text="is.saleAmount"></div>
        </div>
        <div class="w-50 bl-l">
          <div class="text-grey font-lg mb-2">奖池滚存</div>
          <div class="font-xxl text-red" v-text="is.jackpotAmount"></div>
        </div>
      </div>
    </div>

    <div class="bg-white text-center p-5 mt-3 py-3">
      <div class="d-flex text-grey font-lg mb-2">
        <div class="box-xl">奖级</div>
        <div class="box-xl">中奖注数</div>
        <div class="box-xl">每注奖金</div>
      </div>
      <div class="d-flex bg-red py-1 mb-2" :key="i" v-for="(l, i) in is.levels">
        <div class="box-xl" v-text="l.level"></div>
        <div class="box-xl" v-text="l.bets || '-'"></div>
        <div class="box-xl text-red" v-text="l.perBouns"></div>
      </div>
    </div>

    <footer class="bg-white text-center p-2 bt-l">
      <a @click="jump('/daletou')" class="btn btn-danger">继续选择本彩种</a>
    </footer>

  </div>
</template>

<script>
import { jump } from '../../router'
import http from '../../http'

export default {
  name: 'daletou-prize',
  data: () => ({is: {}}),
  beforeRouteEnter (to, from, next) {
    http.post('/digital/daletou/prize', to.query).then(is => {
      next(vm => {
        vm.is = is
      })
    })
  },
  methods: {jump},
  computed: {
    results () {
      var {results} = this.is
      if (!results) {
        return ''
      }
      var [p, a] = results.split('|').map(e => e.split(','))
      return p.map(e => `<b class="ball on mr-2">${e}</b>`).join('') + '<i class="px-1"></i>' + a.map(e => `<a class="ball on mr-2">${e}</a>`).join('')
    }
  }
}
</script>
